<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="front/front_layout">
<head>
    <title>台桌列表</title>
</head>
<body>
<!--<section layout:fragment="top_menu" style="text-align: right;padding-right: 20px">
</section>-->

<section layout:fragment="content">
    <div class="page-container">
        <div class="page-wrapper">
            <div class="table-wrapper" style="top: 0.1rem;background-color: transparent">
                <div id="nav-waiter-content" class="content">
                    <div class="wrapper" style="background-color: transparent">
                        <div class="table-list">
                            <div id="repeat-table-item" class="table-item" style="display:none;width: 20%;">
                                <div class="item">
                                    <div class="t_name" style="font-size: 1.2rem"></div>
                                    <div class="t_state">空闲</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </div>
    </div>
</section>

<section layout:fragment="extra_scripts">

    <script th:inline="javascript">
        (function(){
            'use strict';
            console.log('tables.html');

            $('#waiter-name').find('.text').text($.cookie('username'));

            var TableState={
                IDLE:0,
                USING:1
            }

            window.initCart = function () {
                console.log('initCart');
                var key = window.storeId + '_' + window.tableId;
                //服务员端，加载数据
               /* cart.load(key);
                cart.userId(window.userId);
                cart.storeId(window.storeId);
                cart.tableId(window.tableId);*/
            };

            window.initWaiter = function () {
                window.isWaiter = true;
                window.userId = $.cookie('userId') || 'codysnail';//'ohmygod';//'idiscody'; //测试使用
                window.storeId = $.cookie('storeId');
                window.username = $.cookie('username');
                /*cart.storeId(window.storeId);
                cart.userId(window.userId);*/
            }

            var isLogin = $.cookie('isLogin');
            if (!isLogin) {
                var $container = $('.page-container');
                $container.load('/snippet/login.html', '_t=23', function (text, status, $xhr) {
                });
            } else {
                initWaiter();
            }

            var tableMap = {};
            function showStoreTables() {
                console.log("store id "+window.storeId);
                $.getJSON('/api/table/storeid/' + window.storeId,{},function(data,status,xhr){
                    console.log(data)
                    $.each(data,function(index,item){
                        tableMap[item.id] = item.name;
                        addTable(item);
                    });

                });
            }

            function addTable(item){
                var $newItem = cloneItem();
                $newItem.attr('t-id',item.id);
                $newItem.attr('t-name',item.name);
                $newItem.find('.t_name').text(item.name);
                $newItem.attr('t-seating',item.seating);
                $newItem.attr('t-state',item.state);
                setTableState($newItem,item);
                $newItem.css({'visibility':'hidden'});
                $repeatTableItem.before($newItem);
                var $innerItem = $newItem.find('.item');
                var width = $innerItem.width();
                $innerItem.height(width);
                $innerItem.css({'line-height':width + 'px'});
                $innerItem.css({'visibility':'visible'});
                $newItem.on("click", tableClicked);
            }

            var appendStr = "";

            function tableClicked() {
                var state = $(this).attr('t-state');
                var tableId = $(this).attr('t-id');
                var tableName = $(this).attr('t-name');

                appendStr = "&tableId=" + tableId + "&tableName=" + tableName;
                window.tableId = tableId;
                if (cart.tableId() != tableId) {
                    window.initCart();
                    cart.tableId(tableId);
                }

                if(state == TableState.IDLE){ //空闲台桌，需要输入人数
                    confirm("该餐桌暂未就餐");
                }else{
                    /* $.get('/api/getorder/table/' + tableId, function (data) {
                     showOnlineOrder(data);
                     });*/
                    location.href= "/front/table/"+tableId;
//                    location.href="#action=waiter_menus"+appendStr;
                }

            }

            $(window).resize(function(){
                resizeTableItem();
            });

            function resizeTableItem(){
                console.log('resize');
                var $tableItem = $('.table-list .item');
                var width = $tableItem.width();
                $tableItem.height(width);
                $tableItem.css({'line-height':width + 'px'});
            }


            function  setTableState($table,item) {
                var $state = $table.find('.t_state');
                if(item.state == TableState.USING){
                    $table.addClass('not-idle');
                    $table.attr('t-state',item.state);
                    $state.text('就餐中...');
                }else{
                    $table.removeClass('not-idle');
                    $state.text(item.seating + "人");
                }
            }

            var $repeatTableItem = undefined;
            function cloneItem(){
                if(!$repeatTableItem){
                    $repeatTableItem = $('#repeat-table-item');
                }
                var $item = $repeatTableItem.clone();
                $item.show();
                $item.attr('id',Date.now());
                return $item;
            }

            showStoreTables();
        }());
    </script>
</section>

</body>

</html>